export default {
  reflect: `const Vulnerable: React.FC = () => {
    const [name, setName] = useState<string>('');
    const { t } = useTranslation();
  
    const handleKeydown = (e: any) => {
      if (e.key === 'Enter') {
        setName(e.target.value);
        if (judgeScript(e.target.value)) {
          messageBox.info({ content: t('xss.insertScript') });
        }
      }
    };
  
    return (
      <>
        <Title italic level={4}>
          {t('xss.reflect.title')}
        </Title>
        <Input onKeyDown={handleKeydown} />
        <Title className="mt-5" italic level={4}>
          {t('xss.reflect.response')}
        </Title>
        <div dangerouslySetInnerHTML={{ __html: \`\${t('xss.reflect.welcome')}\${name}\` }} />
      </>
    );
  };`,
  dom: `const Vulnerable: React.FC = () => {
    const { t } = useTranslation();
    const [searchParams] = useSearchParams();
    const navigate = useNavigate();
  
    const options = useMemo(() => {
      let nativeOptions: DefaultOptionType[] = [
        {
          label: 'Chinese',
          value: 'Chinese',
        },
        {
          label: 'English',
          value: 'English',
        },
        {
          label: 'German',
          value: 'German',
        },
        {
          label: 'French',
          value: 'French',
        },
      ];
  
      if (searchParams?.get('default') && searchParams.get('default')!.length !== 0) {
        const defaultLang = searchParams.get('default')!;
        nativeOptions.unshift({
          label: '-------',
          value: '-------',
          disabled: true,
        });
        nativeOptions.unshift({
          label: <div dangerouslySetInnerHTML={{ __html: defaultLang }} />,
          value: defaultLang + ' ',
          disabled: true,
        });
      }
  
      return nativeOptions;
    }, [searchParams]);
  
    const handleSelect = (val: string) => {
      console.log(searchParams.get('default'));
      navigate(\`/xss/dom?default=\${val}\`, {
        replace: true,
      });
    };
  
    return (
      <Typography>
        <Title italic level={4}>
          {t('xss.dom.title')}
        </Title>
        <Select
          defaultValue={
            searchParams?.get('default') && searchParams.get('default')!.length !== 0
              ? searchParams.get('default')!
              : 'Chinese'
          }
          options={options}
          onSelect={handleSelect}
        />
      </Typography>
    );
  };`,
  href: `const Vulnerable: React.FC = () => {
    const [favoriteWebsite, setFavoriteWebsite] = useState<string>('');
    const { t } = useTranslation();
  
    const handleKeydown = (e: any) => {
      if (e.key === 'Enter') {
        setFavoriteWebsite(e.target.value);
        if (judgeScript(e.target.value)) {
          messageBox.info({ content: t('xss.insertScript') });
        }
      }
    };
  
    return (
      <>
        <Title italic level={4}>
          {t('xss.href.title')}
        </Title>
        <Input maxLength={20} onKeyDown={handleKeydown} />
        <Title className="mt-5" italic level={4}>
          {t('xss.href.response')}
        </Title>
        <Text>
          {t('xss.href.favoriteWebsite')}&nbsp;
          {/* 注意React此处插值语法会自动进行html转义 */}
          <a href={favoriteWebsite}>{favoriteWebsite}</a>
        </Text>
      </>
    );
  };`,
  store: `const Vulnerable: React.FC = () => {
  const [dataSource, setDataSource] = useState<MessageType[]>([]);
  const [form] = Form.useForm();
  const { t } = useTranslation();

  // 获取/刷新留言
  const { loading, refresh } = useRequest<any, any>(async () => {
    const result = await getMessage();
    setDataSource(result);
    form.resetFields();
  });

  // 添加留言
  const { run: addMsg } = useRequest(
    async () => {
      const { title, content } = form.getFieldsValue(['title', 'content']);
      if (judgeScript([title, content])) {
        messageBox.info({ content: t('xss.insertScript') });
      }
      await addMessage({ title, content });
      await refresh();
    },
    { manual: true },
  );

  // 清空留言
  const { run: clearMsg } = useRequest(
    async () => {
      await removeMessage();
      await refresh();
    },
    { manual: true },
  );

  return (
    <section className="flex ldpi:flex-col">
      <div className="flex-1 pr-5">
        <Title italic level={4}>
          {t('xss.store.title')}
        </Title>
        <Form layout="vertical" form={form} labelAlign="left" labelCol={{ span: 4 }}>
          <Form.Item name="title" className="mb-0" label={t('title')} required>
            <Input maxLength={20} />
          </Form.Item>
          <Form.Item name="content" className="mb-0" label={t('message')} required>
            <Input.TextArea />
          </Form.Item>
          <Button.Group className="mt-2">
            <Button onClick={addMsg}>{t('add')}</Button>
            <Button onClick={clearMsg}>{t('clear')}</Button>
            <Button onClick={refresh}>{t('refresh')}</Button>
          </Button.Group>
        </Form>
      </div>
      <div className="flex-1">
        <Title level={4} italic>
          {t('xss.store.message')}
        </Title>
        <Spin spinning={loading}>
          <div className="max-h-[560px] overflow-scroll">
            {dataSource.length === 0 && (
              <Empty
                style={{ color: 'var(--empty-font)' }}
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description={t('empty')}
              />
            )}
            {dataSource.map((m, idx) => (
              <div key={idx} className="p-3 border">
                <h5 dangerouslySetInnerHTML={{ __html: m.title }} />
                <p dangerouslySetInnerHTML={{ __html: m.content }} />
              </div>
            ))}
          </div>
        </Spin>
      </div>
    </section>
  );
};`,
};
